<template>
  <el-dialog v-model="visible" title="收货单详情" width="1800" show-footer show-zoom resize @close="close">
    <div class="py-2 px-2" style="background-color: #EAF3FF;">
      <div class="flex">
        <div class="item">采购单号：<span>{{ datum.receive_order?.receipt_number }}</span></div>
        <div class="item">平台下单号：<span>{{ datum.receive_order?.platform_order_no }}</span></div>
        <div class="item">快递单号：<span>{{ datum.receive_order?.express_json &&
          datum.receive_order?.express_json.join(',') }}</span>
        </div>
      </div>
      <div class="flex">
        <div class="item">采购员：<span>{{ datum.receive_order?.purchase_user }}</span></div>
        <div class="item">仓库：<span>{{ datum.receive_order?.warehouse_name }}</span></div>
        <div class="item">国家：<span style="color:#E50113 ;">{{ datum.receive_order?.country }}</span></div>
      </div>
      <div class="">
        <div class="item">下单备注：{{ datum.receive_order?.order_remark }}</div>
      </div>
    </div>
    <div>
      <div class="py-2">
        <el-button type="primary" @click="handleShelve">送上架</el-button>
        <el-button type="primary" @click="handleQC">送质检</el-button>
        <el-button type="primary" @click="handleProcess">加工</el-button>
        <el-button type="primary" @click="handleAbnormal">异常</el-button>
      </div>
      <el-table :data="datum.details" border height="500" size="mini" style="width: 100%" highlight-current-row
        :header-cell-style="{
          color: '#333333',
          background: '#F6FAFF'
        }" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="40" />
        <el-table-column type="index" width="55" label="序号" />
        <el-table-column prop="sku" label="SKU/自定义SKU" width="180">
          <template #default="{ row }">
            <div>SKU：{{ row.sku }}</div>
            <div>自定义：{{ row.custom_sku }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="batch_code_list" label="批次号" width="135">
          <template #default="{ row }">
            <div class="base-text-color" v-for="(item, index) in row.batch_code_list" :key="index">{{ item }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="sku_en_title" label="产品名称" width="220">
          <template #default="{ row }">
            <el-tooltip class="item" effect="dark" :content="row.sku_cn_title" placement="top">
              <div class="overflow-line2 text-[#333333]">{{ row.sku_cn_title }}</div>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" :content="row.sku_en_title" placement="top">
              <div class="overflow-line2 text-[#333333]">{{ row.sku_en_title }}</div>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="batch_code" label="产品图片" width="100">
          <template #default="{ row }">
            <template v-for="(item, index) in row.image">
              <div v-if="index == 0">
                <VImage :src="item" width="60" height="60" :previewlist="row.image"></VImage>
              </div>
            </template>

            <!-- <VImage :src={i} width="60" height="60"></VImage> -->
          </template>
        </el-table-column>
        <el-table-column prop="process_status_cn" label="加工" width="55" />
        <el-table-column prop="qc_status_cn" label="质检" width="55" />
        <el-table-column prop="num" label="采购数量" width="85" />
        <el-table-column prop="wait_check_num" label="点数" width="180">
          <template #default="{ row }">
            <el-input style="width: 60px;" v-model="row.wait_check_num"></el-input><el-button type="primary" size="mini"
              @click="handleRelate(row.id)">重新点数</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="check_num" label="已点数量" width="90" />
        <el-table-column prop="diff_num" label="差异数量" width="90" />
        <el-table-column prop="status_cn" label="状态" width="70" />
        <el-table-column prop="batch_code" label="打印" width="190">
          <template #default="{ row }">
            <div class="flex items-center">
              <div>
                <el-input style="width: 60px;" v-model="row.number"></el-input>
              </div>
              <div>
                <el-button class="ml-3 mb-2" type="primary" size="mini" @click="handleBarPrinting(row)">条形打印</el-button>
                <el-button class="ml-2" type="primary" size="mini" @click="handleBoxPrinting(row)">装箱单打印</el-button>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="batch_code" label="拍照" width="160">
          <template #default="{ row, $index }">
            <el-button class="" type="primary" size="mini" @click="handlePhotograph(row)">拍照</el-button>
            <el-button class="ml-2" type="primary" size="mini" @click="handleViewImage(row)">查看</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="remark" label="备注" width="180" />
      </el-table>

    </div>
    <template #footer>
      <div class="flex justify-center py-2">
        <el-button @click="close">关闭</el-button>
      </div>
    </template>
  </el-dialog>
  <DialogImage ref="DialogImageRef"></DialogImage>
  <DialogPhotograph ref="DialogPhotographRef"></DialogPhotograph>
  <packingPrinting ref="packingPrintingRef"></packingPrinting>
</template>
<script setup name="ComModal">
import { getOrder, relateNum, createShelveOrder, createQcOrder, createProcessOrder, createAbnormal } from '../api/index'
import { reactive, ref, toRefs } from 'vue'
import { ElMessage } from 'element-plus'
import VImage from '@/components/Image/index.vue'
import DialogImage from '@/components/DialogImage/index.vue'
import DialogPhotograph from '@/components/DialogPhotograph/index.vue'
import { getLodop } from '@/utils/LodopFuncs.js';
import { getCurrentDayNumber } from '@/utils/dateOrTime.js'
import packingPrinting from './packingPrinting.vue'

const visible = ref(false)
const loading = ref(false)
const formRef = ref(null)
const emits = defineEmits(['query'])

const data = reactive({
  datum: {
    receive_order: null
  },
  receive_order_id: '',
  multipleSelection: []
})
const { datum, multipleSelection, receive_order_id } = toRefs(data)

const open = (id) => {
  receive_order_id.value = id
  getDetail()
  visible.value = true
}

const getDetail = async () => {
  try {
    const res = await getOrder({
      receive_order_id: receive_order_id.value
    })
    datum.value = res.data
  } catch (e) {
    throw Error(e)
  }
}

const handleSelectionChange = (val) => {
  multipleSelection.value = val
}

// 重新点数
const handleRelate = async (id) => {
  try {
    const res = await relateNum({
      detail_id: id
    })
    ElMessage.success(res.data.message)
    getDetail()
  } catch (e) {
    throw Error(e)
  }
}

// 送上架
const handleShelve = async () => {
  if (!isHandle()) return
  const details = multipleSelection.value.map(i => {
    return {
      detail_id: i.id,
      num: i.wait_check_num
    }
  })
  try {
    const res = await createShelveOrder({
      receive_order_id: receive_order_id.value,
      details
    })
    ElMessage.success(res.message)
    getDetail()
  } catch (e) {
    throw Error(e)
  }
}

// 送质检
const handleQC = async () => {
  if (!isHandle()) return
  const details = multipleSelection.value.map(i => {
    return {
      detail_id: i.id,
      num: i.wait_check_num
    }
  })
  try {
    const res = await createQcOrder({
      receive_order_id: receive_order_id.value,
      details
    })
    ElMessage.success(res.message)
    getDetail()
  } catch (e) {
    throw Error(e)
  }
}

// 加工
const handleProcess = async () => {
  if (!isHandle()) return
  const details = multipleSelection.value.map(i => {
    return {
      detail_id: i.id,
      num: i.wait_check_num
    }
  })
  try {
    const res = await createProcessOrder({
      receive_order_id: receive_order_id.value,
      details
    })
    ElMessage.success(res.message)
    getDetail()
  } catch (e) {
    throw Error(e)
  }
}

// 异常
const handleAbnormal = async () => {
  if (!isHandle()) return
  const detail_ids = multipleSelection.value.map(i => i.id)
  try {
    const res = await createAbnormal({
      receive_order_id: receive_order_id.value,
      detail_ids
    })
    ElMessage.success(res.message)
    getDetail()
  } catch (e) {
    throw Error(e)
  }
}

const isHandle = () => {
  return !multipleSelection.value.length ? ElMessage.error('请先选择行!') && false : true
}

const close = () => {
  visible.value = false
}

// const filterImage = async (list) => {
//   const url_list = []
//   list.forEach(element => {
//     url_list.push(element.)
//   })
// }

const DialogPhotographRef = ref()
const handlePhotograph = (row) => {
  DialogPhotographRef.value.open(1, row.id)
}

const DialogImageRef = ref()
const handleViewImage = (row) => {
  DialogImageRef.value.open(1, row.id)
}

const handleBarPrinting = (row, code) => {
  const batch_code = code || row.batch_code_list[row.batch_code_list.length - 1]
  if(!row.number || row.number <= 0){
    ElMessage.error('请输入打印件数')
    return
  }
  const LODOP = getLodop();
  for (let i = 0; i < row.number; i++) {
    LODOP.ADD_PRINT_RECT(0, 0, 300, 200, 0, 1);
    LODOP.ADD_PRINT_TEXT(10, 5, 240, 33, row.sku);
    LODOP.SET_PRINT_STYLEA(0, "FontSize", 16);
    LODOP.SET_PRINT_STYLEA(0, "Bold", 1);
    LODOP.ADD_PRINT_TEXT(10, 220, 100, 33, getCurrentDayNumber());
    LODOP.SET_PRINT_STYLEA(0, "FontSize", 16);
    LODOP.SET_PRINT_STYLEA(0, "Bold", 1);
    LODOP.ADD_PRINT_TEXT(150, 20, 163, 33, datum.value.receive_order.receipt_number);
    LODOP.SET_PRINT_STYLEA(0, "FontSize", 22);
    LODOP.SET_PRINT_STYLEA(0, "Bold", 1);
    LODOP.ADD_PRINT_BARCODE(40, 5, 300, 100, "Code39", batch_code);
    // LODOP.PREVIEW(); // 打印预览
    LODOP.PRINT();
  }
}

const packingPrintingRef = ref()
const handleBoxPrinting = (row) => {
  const data = {
    batch_code: row.batch_code_list[row.batch_code_list.length - 1],
    warehouse_name: datum.value.receive_order.warehouse_name,
    country: datum.value.receive_order.country,
    number: row.number,
    num: row.num,
    receipt_number: datum.value.receive_order.receipt_number,
    remark: row.remark
  }
  packingPrintingRef.value.open(data)
  // const LODOP = getLodop();
  // LODOP.ADD_PRINT_RECT(0, 0, 400, 300, 0, 1);
  // LODOP.ADD_PRINT_TEXT(20, 20, 163, 33, 'X20');
  // LODOP.SET_PRINT_STYLEA(0, "FontSize", 16);
  // LODOP.SET_PRINT_STYLEA(0, "Bold", 1);
  // LODOP.ADD_PRINT_TEXT(20, 300, 163, 33, '5-1');
  // LODOP.SET_PRINT_STYLEA(0, "FontSize", 16);
  // LODOP.SET_PRINT_STYLEA(0, "Bold", 1);
  // LODOP.ADD_PRINT_TEXT(50, 100, 163, 33, datum.value.receive_order?.country);
  // LODOP.SET_PRINT_STYLEA(0, "FontSize", 16);
  // LODOP.SET_PRINT_STYLEA(0, "Bold", 1);
  // LODOP.ADD_PRINT_TEXT(50, 200, 163, 33, datum.value.receive_order?.warehouse_name);
  // LODOP.SET_PRINT_STYLEA(0, "FontSize", 16);
  // LODOP.SET_PRINT_STYLEA(0, "Bold", 1);
  // LODOP.ADD_PRINT_BARCODE(80, 50, 390, 100, "Code39", row.batch_code_list[0]);
  // LODOP.ADD_PRINT_TEXT(210, 20, 163, 33, '装袋+回收标');
  // LODOP.SET_PRINT_STYLEA(0, "FontSize", 22);
  // LODOP.SET_PRINT_STYLEA(0, "Bold", 1);
  // LODOP.ADD_PRINT_TEXT(250, 20, 163, 33, 'PO0322123');
  // LODOP.SET_PRINT_STYLEA(0, "FontSize", 16);
  // LODOP.SET_PRINT_STYLEA(0, "Bold", 1);
  // LODOP.ADD_PRINT_TEXT(250, 220, 163, 33, `打印人-${getCurrentDayNumber()}`);
  // LODOP.SET_PRINT_STYLEA(0, "FontSize", 16);
  // LODOP.SET_PRINT_STYLEA(0, "Bold", 1);
  // LODOP.PREVIEW(); // 打印预览
}

defineExpose({ open })
</script>
<style lang="scss" scoped>
.borderNone {
  :deep(.el-input__wrapper) {
    border: none;
    box-shadow: none
  }
}

.item {
  width: 300px;
  color: #999999;
  font-size: 16px;
  padding: 8px 0;

  span {
    color: #333333;
  }
}
</style>
